<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <!-- 最外层class命名规则 工程-文件路径-文件名  -->
    <div class="demo-basic-vueStudyChild-attrDemo">
        <a v-bind:href="url">百度</a>
        <br>
        <a :href="urlname">新浪</a>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript">
            export default {
                data: function () {
                    return {
                        url: 'https://www.baidu.com',
                        urlname: 'https://www.163.com',
                    }
                }
            }
            </code>
        </pre>
        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>

        <p>
            <div>说明：</div>
            <div>
                <div>1、使用v-bind添加属性</div>
                <div>1、使用“:”添加属性</div>
            </div>
        </p>

    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic-vueStudyChild-attrDemo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 200);
        },
        data: function () {
            return {
                url: 'https://www.baidu.com',
                urlname: 'https://www.163.com',
                htmlCode:`
                    <a v-bind:href="url">百度</a>
                    <a :href="urlname">百度</a>
                `,
            }
        }
    }
</script>

<style scoped lang="scss">
    /***
    scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
    lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
    ***/
</style>

